<template>
  <div>
    <Search></Search>
    <GoodsListNav></GoodsListNav>
    <div class="goods-list-container">
      <Alert show-icon class="tips-box">
        小提示
        <Icon type="ios-lightbulb-outline" slot="icon"></Icon>
        <template slot="desc">请点击商品前的选择框，选择购物车中的商品，点击付款即可。</template>
      </Alert>
      <Button class="cartClear" @click="clearCart">清空购物车</Button>
      <Button class="cart-Delete" @click="DeleteCart">删除</Button>
      <Table border ref="selection" :columns="columns" :data="shoppingCart" size="large" @on-selection-change="select" no-data-text="您的购物车没有商品，请先添加商品到购物车再点击购买"></Table>
      <!--<<<<<<< HEAD-->
      <!--      <div class="page-size">-->
      <!--        <Page :total="100" show-sizer></Page>-->
      <!--      </div>-->
      <!--=======-->
      <el-button-group class="page">
        <el-button type="primary" @click="firstPage">首页</el-button>
        <el-button type="primary" icon="el-icon-arrow-left" @click="prePage">上一页</el-button>
        <el-button type="primary" disabled>第{{this.pages.pageNum}}页</el-button>
        <el-button type="primary" @click="nextPage">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
      </el-button-group>
      <div class="address-container">
        <h3>收货人信息</h3>
        <div class="address-box">
          <div class="address-check">
            <div class="address-check-name">
              <span><Icon type="ios-checkmark-outline"></Icon> {{selectAddress}}</span>
            </div>
            <div class="address-detail">
              <p>{{checkAddress.address}}</p>
            </div>
          </div>
          <Collapse>
            <Panel>
              选择地址
              <p slot="content">
                <RadioGroup vertical size="large" @on-change="changeAddress">
                  <Radio :label="item.customerAddrId" v-for="(item, index) in address" :key="index">
                    <span>{{item.address}} {{item.zipcode}}</span>
                  </Radio>
                </RadioGroup>
              </p>
            </Panel>
          </Collapse>
        </div>
      </div>
      <div class="point-container">
        <h3>用户积分:{{point}}
        </h3>
        <Collapse>
          <Panel>
            选择积分
            <p slot="content">
              <RadioGroup vertical size="large">
                <InputNumber :min="0"  v-model="count" size="large" @on-change="changePoint"></InputNumber>
              </RadioGroup>
            </p>
          </Panel>
        </Collapse>
      </div>

      <div class="pay-container">
        <div class="pay-box">
          <p><span>提交订单应付总额：</span> <span class="money"><Icon type="social-yen"></Icon> {{totalPrice.toFixed(2)}}</span></p>
          <div class="pay-btn">
            <Button type="error" size="large" @click="gotoPay">支付订单</Button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Search from '@/components/Search';
import GoodsListNav from '@/components/nav/GoodsListNav';
import store from '@/vuex/store';
import { mapState, mapActions } from 'vuex';
import {cartInfo, ClearAll, DeleteGoods} from '../api/cart';
import {userAddress, userPoint} from '../api/user';
// import {orderInfo} from '../api/order';
export default {
  name: 'Order',
  beforeRouteEnter (to, from, next) {
    window.scrollTo(0, 0);
    next();
  },
  created () {
    this.loadAddress();
  },
  data () {
    return {
      count: 0,
      address: [],
      shoppingCart: [],
      goodsCheckList: [],
      selectAddress: '未选择',
      selected: 0,
      delete: false,
      clear: false,
      columns: [
        {
          type: 'selection',
          width: 58,
          align: 'center'
        },
        {
          title: '图片',
          key: 'img',
          width: 100,
          render: (h, params) => {
            return h('div', [
              h('img', {
                attrs: {
                  src: params.row.picUrl,
                  width: 60,
                  height: 80
                }
              })
            ]);
          },
          align: 'center'
        },
        {
          title: '标题',
          key: 'productName',
          align: 'center'
        },
        {
          title: '套餐',
          width: 198,
          key: 'productTypeName',
          align: 'center'
        },
        {
          title: '数量',
          key: 'productAmount',
          width: 68,
          align: 'center'
        },
        {
          title: '价格',
          width: 80,
          key: 'price',
          align: 'center'
        }
      ],
      checkAddress: {
        name: '未选择',
        address: '请选择地址'
      },
      remarks: '',
      point: 0,
      dataCount: 0,
      pages: {
        pageNum: 1,
        pageSize: 5
      }
    };
  },
  computed: {
    ...mapState(['address', 'shoppingCart']),
    // 计算总价
    totalPrice () {
      let price = 0;
      if (this.delete === false & this.clear === false) {
        this.goodsCheckList.forEach(item => {
          price += item.price * item.productAmount;
        });

        price -= (this.count * 0.01);
        if (price <= 0) {
          price = 0;
        }
      }

      return price;
    }
  },
  methods: {
    ...mapActions(['loadAddress']),
    changePoint () {
      if (this.count > this.point) {
        this.$Message.warning('用户积分不足');
        this.count = this.point;
      }
      return this.count;
    },
    gotoPay () {
      if (this.goodsCheckList[0].cartGoodsId == null) {
        this.$Message.warning('请选择购物车里的商品');
      } else if (this.selectAddress === '未选择') {
        this.$Message.warning('请选择地址');
      } else {
        let IDs = [];
        for (let i = 0; i < this.goodsCheckList.length; i++) {
          IDs[i] = this.goodsCheckList.cartGoodsId;
        }
        console.log(IDs);
        this.$router.push({
          path: '/pay',
          query: {
            cartGoodsIds: IDs,
            customerAddrId: this.selected,
            point: this.count
          }
        });
      }
    },
    // 清空购物车
    clearCart () {
      ClearAll().then((res) => {
        if (res.data.code === '00000') {
          this.clear = true;
          this.$Message.success(res.data.message);
          this.showPage();
        } else {
          this.$Message.error(res.data.message);
        }
      });
    },
    // 删除购物车
    DeleteCart () {
      let GoodsId = {cartGoodsId: this.goodsCheckList[0].cartGoodsId};
      console.log('哈哈哈哈哈哈哈');
      console.log(GoodsId);
      console.log('哈哈哈哈哈哈哈');
      DeleteGoods(GoodsId).then((res) => {
        if (res.data.code === '00000') {
          this.delete = true;
          this.$Message.success(res.data.message);
          this.showPage();
        } else {
          this.$Message.error(res.data.message);
        }
      });
    },
    init (url, config) {
      // <<<<<<< HEAD
      //       let pages = {
      //         pageNum: this.pageNum,
      //         pageSize: this.pageSize
      //       };
      //       cartInfo(pages).then((res) => {
      //         // 处理类型
      //         // 获取用户购物车
      //         if (res.data.code === '00000') {
      //           this.$Message.success(res.data.message);
      //           this.shoppingCart = res.data.data;
      //         } else {
      //           this.$Message.error(res.data.message);
      //         }
      //       });
      // =======
      this.showPage();
      // cartInfo().then((res) => {
      //   // 处理类型
      //   // 获取用户购物车
      //   if (res.data.code === '00000') {
      //     this.$Message.success(res.data.message);
      //     this.shoppingCart = res.data.data;
      //   } else {
      //     this.$Message.error(res.data.message);
      //   }
      // });
      // 用户积分
      userPoint().then((res) => {
        if (res.data.code === '00000') {
          this.point = res.data.data;
          console.log('Deadline');
          console.log(this.point);
        } else {
          this.$Message.error(res.data.message);
        }
      });
      // 用户地址
      userAddress().then((res) => {
        // 处理类型
        // 获取用户地址
        if (res.data.code === '00000') {
          this.address = res.data.data;
          console.log(this.address);
        } else {
          this.$Message.error(res.data.message);
        }
      });
    },
    // 选择购物车中商品
    select (selection) {
      if (this.delete === true) {
        this.delete = false;
      }
      if (this.clear === true) {
        this.clear = false;
      }
      console.log(selection);
      this.goodsCheckList = selection;
    },
    // 更换地址
    changeAddress (data) {
      const father = this;
      this.address.forEach(item => {
        if (item.customerAddrId === data) {
          this.selected = data;
          this.selectAddress = '已选择';
          father.checkAddress.address = `${item.address}${item.zipcode}`;
        }
      });
    },
    // 显示当前页信息
    showPage () {
      cartInfo(this.pages).then((res) => {
        if (res.data.code === '00000') {
          console.log(res.data);
          // 处理类型
          // product获取数据
          console.log(res.data.code);
          this.shoppingCart = res.data.data;
          console.log(this.shoppingCart);
          this.dataCount = this.shoppingCart.length;
          if (this.dataCount === 0 && this.pages.pageNum !== 1) {
            // 超出尾页了
            this.pages.pageNum = this.pages.pageNum - 1;
            this.trailerPage = this.pages.pageNum;
            this.showPage();
            this.$Message.error('现在已经是尾页了哦~');
          }
        } else {
          this.$Message.error(res.data.code);
        }
      });
    },
    // 下一页
    nextPage () {
      this.pages.pageNum = this.pages.pageNum + 1;
      this.showPage();
    },
    // 上一页
    prePage () {
      if (this.pages.pageNum === 1) {
        this.$Message.error('现在已经是首页了哦~');
      } else {
        this.pages.pageNum = this.pages.pageNum - 1;
        this.showPage();
      }
    },
    // 首页
    firstPage () {
      if (this.pages.pageNum === 1) {
        this.$Message.error('现在已经是首页了哦~');
      } else {
        this.pages.pageNum = 1;
        this.showPage();
      }
    }
  },
  mounted () {
    this.init();
  },
  components: {
    Search,
    GoodsListNav
  },
  store
};
</script>

<style scoped>
.goods_img{
  width: 180px;
  height: 180px;
  margin: 10px auto;
  display: table-cell;
  text-align: center;
}
.goods-list-container {
  margin: 15px auto;
  width: 80%;
}
.tips-box {
  margin-bottom: 15px;
}
.point-container {
  margin-top: 15px;
}
.point-box {
  margin-top: 15px;
  padding: 15px;
  border: 1px #ccc dotted;
}
.point-check {
  margin: 15px 0px;
  height: 36px;
  display: flex;
  align-items: center;
}

.address-container {
  margin-top: 15px;
}
.address-box {
  margin-top: 15px;
  padding: 15px;
  border: 1px #ccc dotted;
}
.address-check {
  margin: 15px 0px;
  height: 36px;
  display: flex;
  align-items: center;
}
.address-check-name {
  width: 120px;
  display: flex;
  justify-content: center;
  align-content: center;
  background-color: #ccc;
}
.address-check-name span {
  width: 120px;
  height: 36px;
  font-size: 14px;
  line-height: 36px;
  text-align: center;
  color: #fff;
  background-color: #f90013;
}
.address-detail {
  padding-left: 15px;
  font-size: 14px;
  color: #999999;
}
.remarks-container {
  margin: 15px 0px;
}
.remarks-input {
  margin-top: 15px;
}

.invoices-container p{
  font-size: 12px;
  line-height: 30px;
  color: #999;
}
.pay-container {
  margin: 15px;
  display: flex;
  justify-content: flex-end;
}
.pay-box {
  font-size: 18px;
  font-weight: bolder;
  color: #495060;
}
.money {
  font-size: 26px;
  color: #f90013;
}
.pay-btn {
  margin: 15px 0px;
  display: flex;
  justify-content: flex-end;
}
.page{
  position: absolute;
  left: 75%;
  transform: translate(-50%);
}
</style>
